 /*
 * @description: 退出登录弹窗
 * @Author: along
 * @Date: 2020-09-24
 * @Last Modified by: along
 * @Last Modified time: 2020-09-24
 */
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        width="360px"
        class="__layout"
    >
        <div class="__layout_wrap">
            <i class="zsdxfont zsdxtishijinggao"></i>
            <p class="__layout_title">确定要退出登录吗？</p>
            <p class="__layout_content">退出登录后将自动退出客服系统哦~</p>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                @click="layout()"
                size="small"
                :style="{width: '120px', height: '36px', marginRight: '32px'}"
            >
                退出
            </el-button>
            <el-button
                type="primary"
                size="small"
                @click="dialogVisible = false"
                :style="{width: '120px', height: '36px'}"
            >
                点错了
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'Layout',
    props: {
        dialogVisible: {
            type: Boolean,
            default: () => {}
        }
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.$emit('close');
            }
        }
    },
    methods: {
        /**
         * @description 退出登录
         */
        layout () {
            this.$post("Login/logout", {}, resp => {
                if (resp.code == 1) {
                    this.$store.commit('global/SET_LOGIN', false);
                    sessionStorage.removeItem('CUSTOM_LOGIN');
                    this.$router.replace({
                        name: "Login"
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.__layout {
    .__layout_wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .zsdxtishijinggao {
            font-size: 48px;
            margin-bottom: 12px;
            color: rgba(246,189,66,1);
        }
        .__layout_title {
            color: #333333;
            font-size: 16px;
            margin-bottom: 24px;
        }
        .__layout_content {
            color: #999999;
            font-size: 14px;
        }
    }
    .dialog-footer {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: center;
    }
}
</style>
<style lang="less">
.__layout {
    .el-dialog__body {
        padding-bottom: 20px;
    }
    .el-dialog {
        margin-top: 15% !important;
    }
}
</style>
